<template>
    <div class="bgIng">
        <el-input
                placeholder="输入关键字进行过滤"
                v-model="filterText">
        </el-input>

        <el-tree
                class="filter-tree"
                :data="data"
                :props="defaultProps"
                default-expand-all
                :filter-node-method="filterNode"
                ref="tree">
        </el-tree>

    </div>
</template>

<script>
    export default {
        name: 'manager',
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },

        methods: {
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            }
        },

        data() {
            return {
                filterText: '',
                data: [{
                    id: 1,
                    label: '猪只管理',
                    children: [
                        {
                        id: 4,
                        label: '猪只基本信息管理'
                        },
                        {
                            id: 4,
                            label: '仓库信息'
                        },
                        {
                            id: 4,
                            label: '配种管理'
                        },
                        {
                            id: 4,
                            label: '分娩登记'
                        },
                        {
                            id: 4,
                            label: '流产登记'
                        },
                        {
                            id: 4,
                            label: '死亡登记'
                        },
                        {
                            id: 4,
                            label: '转群登记'
                        },
                        {
                            id: 4,
                            label: '淘汰管理'
                        }, {
                            id: 4,
                            label: '生产计划表管理'
                        },
                        {
                            id: 4,
                            label: '猪进场管理'
                        },
                        {
                            id: 4,
                            label: '疾病管理'
                        },

                    ]
                }, {
                    id: 2,
                    label: '饲料管理',
                    children: [{
                        id: 5,
                        label: '饲料入库记录'
                    }, {
                        id: 6,
                        label: '饲料加工记录'
                    }, {
                            id: 6,
                            label: '领取记录'
                        }, {
                            id: 6,
                            label: '用料记录'
                        }
                    ]
                },
                    {
                    id: 3,
                    label: '药品管理',
                    children: [{
                        id: 7,
                        label: '药品入库记录'
                    }, {
                        id: 8,
                        label: '药品领取记录'
                    },{
                        id: 8,
                        label: '用药记录'
                    }]
                },
                    {
                        id: 3,
                        label: '财务管理',
                        children: [{
                            id: 7,
                            label: '药品购买记录'
                        }, {
                            id: 8,
                            label: '引种购买记录'
                        },{
                            id: 8,
                            label: '售卖记录'
                        },{
                            id: 8,
                            label: '其他财务'
                        }]
                    }

                ],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            };
        }
    };
</script>

<style scoped>
el-row el-link{
    color: red;
}
.bgIng{

}
</style>